// Name:                       Badge
// Description:                Define style for badges
//
// Component:                `.am-badge`
//
// Modifiers:                `.am-badge-primary`
//                           `.am-badge-secondary`
//                           `.am-badge-success`
//                           `.am-badge-warning`
//                           `.am-badge-danger`
//
// ========================================================================


/* ========================================================================
   Component: Badge
 ========================================================================== */

.am-badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: @font-size-xs;
  font-weight: @badge-font-weight;
  color: @badge-color;
  line-height: @badge-line-height;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  background-color: @badge-bg;
  border-radius: @badge-border-radius;

  &:empty {
    display: none;
  }

  a& {
    &:hover,
    &:focus {
      color: @badge-link-hover-color;
      text-decoration: none;
      cursor: pointer;
    }
  }
}



// Color modifier
// ========================================================================

.am-badge-primary {
  background-color: @badge-primary-bg;
  .hook-badge-primary;
}

.am-badge-success {
  background-color: @badge-success-bg;
  .hook-badge-success;
}

.am-badge-warning {
  background-color: @badge-warning-bg;
  .hook-badge-warning;
}

.am-badge-danger {
  background-color: @badge-danger-bg;
  .hook-badge-danger;
}

.am-badge-secondary {
  background-color: @badge-secondary-bg;
  .hook-badge-secondary;
}



// Hooks
// ========================================================================

.hook-badge() {}
.hook-badge-primary() {}
.hook-badge-secondary() {}
.hook-badge-success() {}
.hook-badge-warning() {}
.hook-badge-danger() {}
